<template>
    <div class="num">
        <div class="center">
            <div class="title">截止{{covData.modifyTime | newtime }}全国数据统计
                <ul class="wrap">
                    <li>
                        <span>较昨日{{covData.currentConfirmedIncr | number}}</span>
                        <div class="bold">{{covData.currentConfirmedCount}}</div>
                        <strong>现存确诊</strong>
                    </li>
                    <li>
                        <span>较昨日{{covData.suspectedIncr | number}}</span>
                        <div class="bold">{{covData.suspectedCount}}</div>
                        <strong>境外输入</strong>
                    </li>
                    <li>
                       <span>较昨日{{covData.seriousIncr | number}}</span>
                        <div class="bold">{{covData.seriousCount }}</div>
                        <strong>现存无症状</strong>
                    </li>
                    <li>
                        <span>较昨日{{covData.confirmedIncr | number}}</span>
                        <div class="bold">{{covData.confirmedCount}}</div>
                        <strong>累计确诊</strong>
                    </li>
                    <li>
                        <span>较昨日{{covData.deadIncr | number}}</span>
                        <div class="bold">{{covData.deadCount }}</div>
                        <strong>累计死亡</strong>
                    </li>
                    <li>
                        <span>较昨日{{covData.curedIncr | number}}</span>
                        <div class="bold">{{covData.curedCount}}</div>
                        <strong>累计治愈</strong>
                    </li>
                    
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['covData'],
        filters:{
            number:function(val){
                val=val>0?"+"+val:"无变化"
                return val
            },
             //处理时间格式
            newtime:function(time){
                // var data=new Date(num);
                // return data.toLocaleDateString()
                time=new Date(time).toLocaleString("chinese",{hour12:false});
                return time
            }
        },
       
    }
</script>

<style lang="less" scoped>
        .num{
            background-color: #f5f5f5;
            padding-top: 0.2rem;
            margin-bottom: 1.1rem;
                .center{
                    background-color: #fff;
                    height: 2rem;
                    border-radius: 00.2rem;
                    padding: 0.2rem;
                    .title{
                        color: #666;
                        margin-bottom: 00.2rem;
                        .wrap{
                            display: flex;
                            flex-wrap: wrap;
                            padding-top: 0.2rem;
                            border-radius: 0.1rem;
                            box-shadow: 0 0 3px 2px rgba(175,175,175,20%);
                            li{
                                width: 33.33%;
                                text-align: center;
                                margin-bottom: 00.2rem;
                                color: #666;
                                strong{
                                    color: #333;
                                }
                            }
                            .bold{
                                font-weight: bold;
                            }
                            li:nth-child(1) .bold{
                                color: red;
                            }
                            li:nth-child(2) .bold{
                                color: green;
                            }
                            li:nth-child(3) .bold{
                                color: orange;
                            }
                            li:nth-child(4) .bold{
                                color: red;
                            }
                            li:nth-child(5) .bold{
                                color: red;
                            }
                            li:nth-child(6) .bold{
                                color: red;
                            }
                        }
                    }
                }
        }
       
</style>